<template>
  <view class="container">
    <view class="form-item">
      <text class="label">选择城市：</text>
      <view class="input-wrapper" @click="openCityPicker">
        <text class="input-text">{{ selectedCity || '请选择城市' }}</text>
        <text class="arrow">></text>
      </view>
    </view>
    
    <view class="form-item">
      <text class="label">选择类型：</text>
      <view class="input-wrapper" @click="openTypePicker">
        <text class="input-text">{{ selectedType || '请选择类型' }}</text>
        <text class="arrow">></text>
      </view>
    </view>
    
    <view class="form-item">
      <text class="label">选择用户：</text>
      <view class="input-wrapper" @click="openUserPicker">
        <text class="input-text">{{ selectedUser || '请选择用户' }}</text>
        <text class="arrow">></text>
      </view>
    </view>
    
    <!-- 选择器组件 -->
    <select-drawer 
      ref="selectDrawer"
      :title="pickerTitle"
      :label-key="currentLabelKey"
      :value-key="currentValueKey"
      @confirm="onSelectConfirm"
      @cancel="onSelectCancel"
    />
  </view>
</template>

<script>
import SelectDrawer from './select-drawer.vue';

export default {
	components: {
		SelectDrawer
	},
	data() {
		return {
			selectedCity: '',
			selectedType: '',
			selectedUser: '',
			pickerTitle: '请选择',
			currentLabelKey: 'label',
			currentValueKey: 'value',
      
			// 城市数据 - 标准格式
			cityOptions: [
				{ label: '北京', value: 'beijing' },
				{ label: '上海', value: 'shanghai' },
				{ label: '广州', value: 'guangzhou' },
				{ label: '深圳', value: 'shenzhen' },
				{ label: '杭州', value: 'hangzhou' },
				{ label: '南京', value: 'nanjing' },
				{ label: '武汉', value: 'wuhan' },
				{ label: '成都', value: 'chengdu' }
			],
      
			// 类型数据 - 标准格式
			typeOptions: [
				{ label: '紧急救援', value: 'emergency' },
				{ label: '常规维修', value: 'maintenance' },
				{ label: '设备检查', value: 'inspection' },
				{ label: '故障排除', value: 'troubleshoot' }
			],
      
			// 用户数据 - 自定义字段格式
			userOptions: [
				{ name: '张三', id: 1001, department: '技术部' },
				{ name: '李四', id: 1002, department: '销售部' },
				{ name: '王五', id: 1003, department: '客服部' },
				{ name: '赵六', id: 1004, department: '运营部' },
				{ name: '钱七', id: 1005, department: '技术部' }
			],
      
			currentPickerType: '' // 当前选择器类型
		};
	},
	methods: {
		// 打开城市选择器
		openCityPicker() {
			this.currentPickerType = 'city';
			this.pickerTitle = '选择城市';
			this.currentLabelKey = 'label';
			this.currentValueKey = 'value';
			this.$refs.selectDrawer.open(this.cityOptions, this.selectedCity);
		},
    
		// 打开类型选择器
		openTypePicker() {
			this.currentPickerType = 'type';
			this.pickerTitle = '选择类型';
			this.currentLabelKey = 'label';
			this.currentValueKey = 'value';
			this.$refs.selectDrawer.open(this.typeOptions, this.selectedType);
		},
    
		// 打开用户选择器 - 使用自定义字段
		openUserPicker() {
			this.currentPickerType = 'user';
			this.pickerTitle = '选择用户';
			this.currentLabelKey = 'name';  // 使用name字段作为显示标签
			this.currentValueKey = 'id';    // 使用id字段作为选中值
			this.$refs.selectDrawer.open(this.userOptions, this.selectedUser);
		},
    
		// 选择确认回调
		onSelectConfirm(data) {
			console.log('选择确认:', data);
      
			if (this.currentPickerType === 'city') {
				this.selectedCity = data.label;
				console.log('选择的城市:', this.selectedCity, '值:', data.valueKey);
			} else if (this.currentPickerType === 'type') {
				this.selectedType = data.label;
				console.log('选择的类型:', this.selectedType, '值:', data.valueKey);
			} else if (this.currentPickerType === 'user') {
				this.selectedUser = data.label;
				console.log('选择的用户:', this.selectedUser, 'ID:', data.valueKey);
			}
      
			// 可以在这里添加其他逻辑，比如调用API等
			this.handleSelectionChange();
		},
    
		// 选择取消回调
		onSelectCancel() {
			console.log('选择取消');
		},
    
		// 处理选择变化
		handleSelectionChange() {
			// 这里可以添加选择变化后的逻辑
			// 比如表单验证、数据提交等
			if (this.selectedCity && this.selectedType && this.selectedUser) {
				console.log('表单完整，可以进行下一步操作');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
  padding: 40rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.form-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  .label {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }
  
  .input-wrapper {
    flex: 1;
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    
    .input-text {
      font-size: 32rpx;
      color: #333;
      flex: 1;
      text-align: right;
    }
    
    .arrow {
      color: #999;
      font-size: 28rpx;
      margin-left: 10rpx;
    }
  }
}
</style> 